<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
    integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
    crossorigin="anonymous"></script>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .contentpage1 {
    position: absolute;
    top: 70px;
    left: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    height: calc(100vh - 70px);
  }

  .Top1 {
    display: flex;
    flex-direction: column;
    line-height: 30px;
    width: calc(100vw - 200px);

  }

  .btn {
    margin-right: 20px;
  }

  #form {
    display: flex;
    justify-content: space-evenly;
  }

  #cx {
    height: 35px;
    width: 130px;
  }

  select {
    height: 33px
  }
</style>

<body>

  <div class="container-xxxl">


    <%-include('../comp/header.ejs')%>



      <%-include('../comp/commnav.ejs')%>

        <div class="contentpage1">

          <div class="T">


            <div class="Top1">
              <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item">首页</li>
                  <li class="breadcrumb-item" aria-current="page">信息管理</li>
                  <li class="breadcrumb-item active" aria-current="page">家人管理</li>
                </ol>
              </nav>
              <form action="/index/FamilyManagementejs" method="post" id="form">

                <p>真实姓名<input type="text" placeholder="请输入真实姓名" name="uname"></p>
                <p>手机号<input type="text" placeholder="请输入手机号" name="uphome"></p>
                <p>证件号码<input type="text" placeholder="请输入证件号码" name="UID"></p>


                <p>状态<select name="is_state">
                    <option value="全部">全部</option>
                    <option value="有效">有效</option>
                    <option value="冻结">冻结</option>
                  </select></p>
                <button type="submit" class="btn btn-primary" id="cx">查询</button>
              </form>
            </div>

            <div class="CONTE">


              <table class="table">
                <thead>
                  <tr class="table-secondary text-center">
                    <th scope="col">家人ID</th>
                    <th scope="col">真实姓名</th>
                    <th scope="col">证件类型</th>
                    <th scope="col">证件号码</th>
                    <th scope="col">性别</th>
                    <th scope="col">认定手机号</th>
                    <th scope="col">所在地区</th>
                    <th scope="col">详细地址</th>
                    <th scope="col">状态</th>
                    <th scope="col">操作</th>

                  </tr>
                </thead>
                <tbody>



                  <%userlistdata.forEach((value,index)=>{%>
                    <tr class="text-center">
                      <th scope="row">
                        <%=value.pid%>
                      </th>
                      <td>
                        <%=value.uname%>
                      </td>
                      <td>
                        <%=value.uIDType%>
                      </td>
                      <td>
                        <%=value.pUID%>
                      </td>
                      <td>
                        <%=value.psex%>
                      </td>

                      <td>
                        <%=value.pphome%>
                      </td>

                      <td>
                        <%=value.uaddress%>
                      </td>
                      <td>
                        <%=value.uaddressxx%>
                      </td>

                      <td>
                        <%=value.is_state%>
                      </td>

                      <td><button type="button" class="btn btn-info"><a
                            href="/index/userdatail?id=<%=value.uid%>">查看</a></button><button type="button"
                          class="del1 btn btn-danger" data-bs-toggle="modal" data-bs-target="#staticBackdrop"
                          data-id="<%=value.uid%>">删除</button></td>
                    </tr>
                    <% })%>

                </tbody>
              </table>
            </div>
          </div>


          <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-end">
              <li class="page-item disabled">
                <a class="page-link">Previous</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">Next</a>
              </li>
            </ul>
          </nav>
        </div>





  </div>
  <%-include('../comp/deluser.ejs')%>
    <script>
      $(".del1").click(function () {

        $("#ID").val($(this).attr("data-id"))
      })
    </script>
</body>

</html>